<template>
	<view class="">
		<view class="eqbg">
			<view class="" :style="'height: '+statusBarHeight+'px;'"></view>
			<view class="tabs">
				<image src="../../static/back.png" mode="" @click="back"></image>
				<view class="tabs_right">
					<u-tabs :list="list1" :scrollable='false' lineColor='#5990FF' lineHeight='4' lineWidth='18'
						@click="handleTabs"></u-tabs>
				</view>
			</view>
			<view class="" v-if="activeTab==0||activeTab==1">
				<view class="addlist flex-between" v-if="activeTab==0">
					<view class="addlist_left">
						<view class="navlist" v-for="(item,index) in navlist" :key="index"
							:class="isnav==index?'islist':''" @click="clickItem(item,index)">{{item.name}}</view>
					</view>
					<image src="../../static/addeq.png" mode="" @click="$fun.jump(`./addfacility`)"></image>
				</view>
				<view class="group flex-between">

					<view class="group_left flex" v-if="activeTab==0" @click="changeActiveName('GroupList')">
						<view class="">{{activeName}}({{count}}台)</view>
						<image src="../../static/down.png" mode=""></image>
					</view>

					<view class="group_left flex" v-if="activeTab==1" @click="stateshow=true">
						<view class="">{{stateName}}</view>
						<image src="../../static/down.png" mode=""></image>
					</view>
					<view class="group_left flex" v-if="activeTab==1" @click="stateshow1=true">
						<view class="">{{stateName1}}</view>
						<image src="../../static/down.png" mode=""></image>
					</view>

					<view class="flex" style="display: flex;">
						<view class="group_right" @click="$fun.jump(`./group`)" v-if="activeTab==0">
							分组管理
						</view>
						<image class="imgadd" src="../../static/addeq.png" mode="" v-if="activeTab==1"
							@click="$fun.jump(`/pageC/bound/bound`)"></image>
						<view class="group_right" style="margin-left: 20rpx;" v-if="activeTab==0" @tap="handleDial">
							拨号设置
						</view>
					</view>
				</view>
				<u-picker :show="stateshow" @cancel='stateshow=false' keyName="lable" @confirm="confirm"
					:columns="columns"></u-picker>
				<u-picker :show="stateshow1" @cancel='stateshow1=false' keyName="lable" @confirm="confirm1"
					:columns="columns1"></u-picker>
				<view class="earnings" v-if="activeTab==0">
					<view class="">总收益 {{equipmentInfo.totalIncome}}</view>
					<view class="" style="margin-left: 50rpx;">昨日收益 {{equipmentInfo.yesterIncome}}</view>
				</view>
				<view class="earnings" v-if="activeTab==1">
					<view class="">总收益 {{total_income}}</view>
					<view class="" style="margin-left: 50rpx;">昨日收益 {{yestoday_income}}</view>
				</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between;align-items: center;height: 128rpx;"
				v-else>
				<view class="earnings" style="padding-bottom: 0;display: block;">
					<!-- <view class="">总收益 {{equipmentInfo.totalIncome}}</view>
					<view class="" style="margin-top: 14rpx;">昨日收益 {{equipmentInfo.yesterIncome}}</view> -->
				</view>
				<view class="addlist flex-between" style="width: auto;">
					<image src="../../static/addeq.png" mode="" @click="getShopList"></image>
				</view>
			</view>
			<u-popup :show="addshow" :round="10" mode="bottom" @close="addshow=false">
				<view class="addmodel">
					<view class="top">
						<view class=""></view>
						<view class="">选择托管设备</view>
						<image src="../../static/guanbi.a2efebd2.png" mode="" @click="addshow=false"></image>
					</view>
					<scroll-view scroll-y="true">
						<view class="list">
							<view class="listitem" v-for="(item,index) in productlist" :key="index">
								<view class="left">
									<image :src="$fun.imgUrl(item.image)" mode=""></image>
									<view class="">
										<view class="name">{{item.name}}</view>
										<view class="text"><u--text :lines="1" size='12' style="width: 300rpx;"
												color='#999999' :text="item.title"></u--text>
										</view>
										<view class="num">￥{{item.money}}</view>
									</view>
								</view>
								<view class="btn" @click="$fun.jump(`/pageC/shop/shopdetail?id=${item.id}&from=1`)">托管上机
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
		<scroll-view scroll-y="true" v-if="activeTab==0" :style="'height: '+scrollheight+'px;'"
			@scrolltolower='scrolltolower'>
			<view class="" v-if="!list.length" style="display: flex;justify-content: center;padding-top: 300rpx;">
				<image style="width: 200rpx;height: 200rpx;" src="@/static/noneLine.png" mode="heightFix"></image>
			</view>
			<view class="facilitylist" v-for="(item,index) in list" :key="index"
				@click="jump(`/pageC/equipmentProfit?name=${item.sn}&onlineCode=${item.onlineCode}`)">
				<view class="facilitylist_top flex-between">
					<view class="flex">
						<image v-if="activeTab==0" :src="$fun.imgUrl(item.image)" mode=""></image>
						<view class="" style="width: 340rpx;" v-if="activeTab==0">
							<view class="status">
								<view class="onLine" v-if="item.onlineCode==0">在线</view>
								<view class="onLine onLine1" v-if="item.onlineCode==1">离线</view>
								<view class="onLine onLine2" v-if="item.onlineCode==2">故障</view>
								<u--text size='14' :lines="1" :text="item.addrIspCode"></u--text>
							</view>
							<u--text size='11' :lines="1" color='#999999' :text="item.sn"></u--text>
						</view>
					</view>
					<view class="node_type" v-if="item.node_type==-1">次级节点</view>
					<view class="node_type" v-if="item.node_type==0">正常节点</view>
					<view class="node_type" v-if="item.node_type==1">优良节点</view>
					<view class="node_type" v-if="item.node_type==2">稳定节点</view>
				</view>
				<view class="line"></view>
				<view class="facilitylist_bottom flex">
					<view class="box">
						<view class="name">总收益</view>
						<view class="num">{{item.totalIcome}}</view>
					</view>
					<!-- <view class="box">
						<view class="name">昨日收益</view>
						<view class="num">{{item.income}}</view>
					</view> -->
					<view class="box">
						<view class="name">今日收益</view>
						<view class="num">{{item.income}}</view>
					</view>
				</view>
				<view class="" v-if="activeTab==0&&item.pipeType==3">
					<view class="line"></view>
					<view class="adjustment" v-if="activeTab==0">
						<view class="btn1" @tap.stop="handleDialResult(item)">拨号信息</view>
						<view class="btn2"
							@tap.stop="$fun.jump(`/pageC/dialInfo/dialInfo?sn=${item.sn}&netType=${item.netType}`)">调整线路
						</view>
					</view>
					<view class="adjustment" v-if="item.node_type==-1">
						<view class="btn3" @tap.stop="showgo=true,id=item.id">复原节点</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" v-if="activeTab==1" :style="'height: '+scrollheight+'px;'"
			@scrolltolower='scrolltolower'>
			<view class="" v-if="!list.length" style="display: flex;justify-content: center;padding-top: 300rpx;">
				<image style="width: 200rpx;height: 200rpx;" src="@/static/noneLine.png" mode="heightFix"></image>
			</view>
			<view class="facilitylist" v-for="(item,index) in list" :key="index"
				@click="jump(`/pageC/equipmentDetail2?ids=${item.id}`)">
				<view class="facilitylist_top flex-between">
					<view class="flex">
						<image src="/static/device.png" mode=""></image>
						<view class="" style="width: 340rpx;">
							<u--text size='14' :lines="1" :text="item.device"></u--text>
							<view class="status">
								<view class="btn" v-if="item.stateName==1">{{item.state}}</view>
								<view class="btn btn2" v-if="item.stateName==2">{{item.state}}</view>
								<view class="btn btn3" v-if="item.stateName==3">{{item.state}}</view>
								<view class="btn btn4" v-if="item.stateName==4">{{item.state}}</view>
								<view class="btn btn5" v-if="item.stateName==5">{{item.state}}</view>
								<view class="btn btn1" v-if="item.stateName==6">{{item.state}}</view>
							</view>
						</view>
					</view>
					<view class="node_type" v-if="item.node_type==-1">次级节点</view>
					<view class="node_type" v-if="item.node_type==0">正常节点</view>
					<view class="node_type" v-if="item.node_type==1">优良节点</view>
					<view class="node_type" v-if="item.node_type==2">稳定节点</view>
				</view>
				<view class="line"></view>
				<view class="facilitylist_bottom flex" style="padding-bottom: 0;">
					<view class="box">
						<view class="name">总收益</view>
						<view class="num">{{item.total_income}}</view>
					</view>
					<view class="box">
						<view class="name">昨日收益</view>
						<view class="num">{{item.income}}</view>
					</view>
					<view class="box">
						<view class="name">今日收益</view>
						<view class="num">{{item.today_income}}</view>
					</view>
				</view>
				<view class="">
					<view class="line" style="margin-top: 20rpx;" v-if="item.node_type==-1"></view>
					<view class="adjustment" v-if="activeTab==0">
						<view class="btn1" @tap.stop="handleDialResult(item)">拨号信息</view>
						<view class="btn2"
							@tap.stop="$fun.jump(`/pageC/dialInfo/dialInfo?sn=${item.sn}&netType=${item.netType}`)">调整线路
						</view>
					</view>
					<view class="adjustment" v-if="item.node_type==-1">
						<view class="btn3" @tap.stop="showgo=true,id=item.id">复原节点</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" v-if="activeTab==2" :style="'height: '+scrollheight1+'px;'"
			@scrolltolower='scrolltolower'>
			<view class="" v-if="!list.length" style="display: flex;justify-content: center;padding-top: 300rpx;">
				<image style="width: 200rpx;height: 200rpx;" src="@/static/noneLine.png" mode="heightFix"></image>
			</view>
			<view class="facilitylist" v-for="(item,index) in list" :key="index">
				<view class="facilitylist_top flex-between">
					<view class="flex">
						<image :src="item.image" mode=""></image>
						<view class="">
							<view class="status" style="width: 380rpx;">
								<view class="btns1" v-if="item.is_activate==1">已激活</view>
								<view class="btns1 btns2" v-if="item.is_activate==0">未激活</view>
								<u--text size='14' :lines="1" :text="item.sn"></u--text>
							</view>
							<view class="" style="font-weight: 400;font-size: 22rpx;color: #333333;margin-top: 14rpx;">
								数量：{{item.num}}台&nbsp;&nbsp;总收益：{{item.total_income}}&nbsp;&nbsp;昨日收益：{{item.yestoday_income}}
							</view>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="facilitylist_bottom" style="display: block;padding-bottom: 0;">
					<view class="right_top">
						<view class="">释放进度</view>
					</view>
					<u-line-progress :percentage="item.speed" height='20' inactiveColor='#c4e8fe'
						activeColor="#5990FF"></u-line-progress>
					<view class="right_bottom">
						<view class="text">{{item.balance}}</view>
						<view class="">{{item.amount}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-modal :show="lineModal" title="提示" showCancelButton @cancel="lineModal = false">
			<view class="">是否清退当前线路?</view>
		</u-modal>
		<u-overlay :show="showgo">
			<view class="showpaw">
				<view class="text">消耗{{use_recover}}复原值复原节点</view>
				<view class="btn flex-between">
					<view class="btn_close" @click="showgo=false">取消</view>
					<view class="btn_sure" @click="recoverNode">确定</view>
				</view>
				<view class="bot">
					复原值余额：{{recovermoney}}
					<!-- <span>去兑换></span> -->
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import headerTop from "@/components/dacizi-headtag/dacizi-headtag.vue"
	export default {
		components: {
			headerTop
		},
		data() {
			return {
				addshow: false,
				lineModal: false,
				showgo: false,
				list1: [{
					name: '混合业务',
					type: 1
				}, {
					name: '定向业务',
					type: 2
				}, {
					name: '托管',
					type: 3
				}],
				navlist: [{
						name: '全部'
					},
					{
						name: '在线'
					},
					{
						name: '离线'
					},
					{
						name: '故障'
					}
				],
				isnav: 0,
				equipment: [{
						title: '全部',
						value: '-1',
						color: '#FFFFFF'
					},
					{
						title: '在线',
						value: '0',
						color: '#00FF00'
					},
					{
						title: '离线',
						value: '1',
						color: '#A0A0A0'
					},
					{
						title: '故障',
						value: '2',
						color: '#FF0000'
					},
				],
				equipmentInfo: {
					count: 0
				},
				list: [],
				page: 1,
				limit: 20,
				activeIndex: 0,
				activeName: '全部分组',
				activeType: '',
				group_id: -1,
				pipeType: '',
				GroupList: [],
				GroupType: [],
				count: 0,
				activeTab: 0,
				isAdd: false,
				vlan: -1,
				showmodel: false,
				scrollheight: 0,
				statusBarHeight: 0,
				scrollheight1: 0,
				stateName: '已下机',
				stateName1: '',
				stateshow: false,
				stateshow1: false,
				columns: [
					[{
							lable: '已下机'
						},
						{
							lable: '待配置'
						},
						{
							lable: '审核中'
						},
						{
							lable: '服务中'
						},
						{
							lable: '待测试'
						},
						{
							lable: '不通过'
						}
					]
				],
				columns1: [],
				recovermoney: 0,
				productlist: [],
				use_recover: '',
				id: '',
				type: 1,
				filterList: {},
				total_income: 0,
				yestoday_income: 0
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			setTimeout(() => {
				if (this.activeTab == 0) {
					this.getGroupList()
				} else if (this.activeTab == 1) {
					this.getBindList(this.page, this.limit)
				} else {
					this.releaseSn()
				}
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.page != 1) {
				if (this.activeTab == 0) {
					this.getUserSnList(this.page, this.limit)
				} else if (this.activeTab == 2) {
					this.releaseSn()
				} else {
					this.getBindList(this.page, this.limit)
				}
			}
		},
		onNavigationBarButtonTap(e) {
			this.$fun.jump('/pageC/add')
		},
		// 分享好友
		onShareAppMessage() {
			return {
				title: '鲲鱬云',
				path: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: '鲲鱬云',
				query: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		onShow() {
			// this.list = []
			this.page = 1
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			this.scrollheight = uni.getWindowInfo().windowHeight - 180 - this.statusBarHeight
			this.scrollheight1 = uni.getWindowInfo().windowHeight - 115 - this.statusBarHeight
			if (this.activeTab == 1) {
				this.scrollheight = this.scrollheight + 50
			} else {
				this.scrollheight = uni.getWindowInfo().windowHeight - 180 - this.statusBarHeight
			}
			this.$fun.ajax.post('config/recharge', {
				id: 9
			}).then(res => {
				this.recovermoney = res.data.money
				this.use_recover = res.data.use_recover
			})
		},
		onHide() {
			this.isAdd = false
		},
		onLoad() {
			this.getGroupList()
			this.getBindscreen()
		},
		methods: {
			btnnav(index) {
				this.isnav = index
			},
			// 拨号信息
			handleDialResult(item) {
				this.$fun.jump(`/pageC/dialResult/dialResult?sn=${item.sn}&netType=${item.netType}`)
			},
			handleAdd() {
				this.$fun.jump('/pageC/add')
			},
			// 拨号设置
			handleDial() {
				this.$fun.jump('/pageC/DialSetting/DialSetting')
			},
			// 点击tabs
			handleTabs(item) {
				this.page = 1,
					this.limit = 20
				if (item.index) {
					this.pipeType = 3
					this.vlan = 1
				} else {
					this.pipeType = -1
					this.vlan = -1
				}
				this.list = []
				this.activeTab = item.index
				this.type = item.type
				if (item.index == 1) {
					this.scrollheight = this.scrollheight + 50
				} else {
					this.scrollheight = uni.getWindowInfo().windowHeight - 180 - this.statusBarHeight
				}
				if (item.index == 0) {
					this.getUserSnList(this.page, this.limit)
				} else if (item.index == 2) {
					this.releaseSn()
				} else {
					this.getBindList(this.page, this.limit)
				}
			},
			//托管设备
			releaseSn() {
				this.$fun.ajax.post('butt/releaseSn', {}).then(res => {
					// console.log(res)
					this.list = res.data
				})
			},
			//托管shop
			getShopList(id) {
				this.addshow = true
				this.$fun.ajax.post('index/type_goods', {
					type: 85
				}).then(res => {
					// console.log(res)
					for (var i = 0; i < res.data.length; i++) {
						if (res.data[i].label) {
							res.data[i].label = res.data[i].label.split(',')
						} else {
							res.data[i].label = []
						}
					}
					this.productlist = res.data
				})
			},
			confirm(item) {
				this.stateName = item.value[0].lable
				this.stageActive = item.value[0].value
				this.stateshow = false
				this.page = 1
				this.list = []
				this.getBindList()
			},
			confirm1(item) {
				this.stateName1 = item.value[0].lable
				this.stateActive = item.value[0].value
				this.stateshow1 = false
				this.page = 1
				this.list = []
				this.getBindList()
			},
			changeActiveName(str) {
				let data = []
				for (var i = 0; i < this[str].length; i++) {
					data.push(this[str][i].name)
				}
				uni.showActionSheet({
					itemList: data,
					success: (res) => {
						console.log(res)
						if (str == 'GroupList') {
							this.group_id = this.GroupList[res.tapIndex].id
							this.activeName = this.GroupList[res.tapIndex].name
							this.count = this.GroupList[res.tapIndex].num
						} else {
							this.pipeType = this[str][res.tapIndex].id
							this.activeType = this[str][res.tapIndex].name
						}
						this.list = []
						this.page = 1
						this.getUserSnList(this.page, this.limit)
						// this.getGroupList()
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			getUserSnList(page, limit) {
				this.$fun.ajax.post('butt/userSnList', {
					page,
					limit,
					onlineCode: this.equipment[this.activeIndex].value,
					group_id: this.group_id,
					pipeType: this.pipeType,
					vlan: this.vlan
				}).then(res => {
					// console.log(res)
					if (res.data.list.length > 0) {
						this.list.push(...res.data.list);
						// this.addressList = res.data
						this.page++
					} else {
						if (this.page != 1) {
							// this.$fun.msg('没有更多数据了...')
						}
					}
					this.equipmentInfo = res.data
				})
			},
			async getBindscreen() {
				const res = await this.$fun.ajax.post('bind/getBindscreen')
				this.filterList = res.data
				this.columns1 = [res.data.stage]
				this.columns = [res.data.type]

				this.stateName = this.columns[0][0].lable
				this.stateName1 = this.columns1[0][0].lable
				this.stateActive = this.columns[0][0].value
				this.stageActive = this.columns1[0][0].value
			},
			getBindList(page, limit) {
				this.$fun.ajax.post('bind/getBindList', {
					page: this.page,
					limit: this.limit,
					online_status: this.stageActive,
					state: this.stateActive,
					sn: ''
				}).then(res => {
					uni.hideLoading()
					if (res.data.list.length > 0) {
						for (let i = 0; i < this.columns1[0].length; i++) {
							res.data.list.map((item) => {
								if (item.state == this.columns1[0][i].lable) {
									item.stateName = this.columns1[0][i].value
								}
							})
						}
						this.list.push(...res.data.list);
						this.addressList = res.data.list
						this.yestoday_income = res.data.yestoday_income
						this.total_income = res.data.total_income
						this.page++
					} else {
						if (this.page != 1) {
							this.$fun.msg('没有更多数据了...')
						}
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			clickItem(item, index) {
				this.isnav = index
				this.activeIndex = index
				this.list = []
				this.page = 1
				this.getUserSnList(this.page, this.limit)
			},
			async getGroupList(onlineCode = -1) {
				await this.$fun.ajax.post('butt/groupList', {
					onlineCode,
				}).then(res => {
					this.GroupList = res.data
					this.count = res.data[0].num
					this.activeName = res.data[0].name
				})
				await this.$fun.ajax.post('butt/typeList', {
					onlineCode,
				}).then(res => {
					this.GroupType = res.data
					this.activeType = res.data[0].name
					this.pipeType = res.data[0].id
				})
				// await this.$fun.ajax.post('butt/typeList', {
				// 	onlineCode,
				// }).then(res => {
				// 	this.GroupType = res.data
				// 	this.activeType = res.data[0].name
				// 	this.pipeType = res.data[0].id
				// })
				await this.getUserSnList(this.page, this.limit)
			},
			//恢复
			recoverNode() {
				let {
					id,
					type
				} = this
				this.$fun.ajax.post('butt/recoverNode', {
					id,
					type
				}).then(res => {
					this.showgo = false
				})
			},
			jump(url) {
				this.$fun.jump(url)
			},
			back() {
				uni.navigateBack()
			},
			scrolltolower() {
				if (this.page != 1) {
					if (this.activeTab == 0) {
						this.getUserSnList(this.page, this.limit)
					} else if (this.activeTab == 2) {
						this.releaseSn()
					} else {
						this.getBindList(this.page, this.limit)
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F1EE;
	}

	.eqbg {
		background: #FFFFFF;
	}

	.tabs {
		display: flex;
		align-items: center;
		margin: 0 30rpx;

		&_right {
			width: 100%;
			margin-left: 60rpx;
		}

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.addlist {
		width: 750rpx;
		height: 88rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&_left {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		image {
			width: 162rpx;
			height: 48rpx;
		}

		.navlist {
			width: 100rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 27rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #999999;
			line-height: 48rpx;
			text-align: center;
			margin-right: 30rpx;
		}

		.islist {
			width: 100rpx;
			height: 48rpx;
			background: #5990FF;
			border-radius: 27rpx;
			color: #FFFFFF;
		}
	}

	.group {
		margin: 30rpx 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&_left {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 7rpx;
			}
		}

		&_right {
			line-height: 48rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #5990FF;
			width: 128rpx;
			height: 48rpx;
			background: #5990FF10;
			border-radius: 48rpx;
		}

		.imgadd {
			width: 162rpx;
			height: 48rpx;
		}
	}

	.earnings {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin: 0 30rpx;
		display: flex;
		padding-bottom: 30rpx;
	}

	.model {
		width: 750rpx;
		// height: 384rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;

		&_name {
			width: 750rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}

		&_line {
			width: 750rpx;
			height: 16rpx;
			background: #F1F3F6;
		}
	}

	.facilitylist {
		width: 710rpx;
		// height: 183rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		margin: 30rpx auto 0;
		padding-bottom: 20rpx;


		.flex {
			display: flex;
		}

		&_top {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			padding: 27rpx 0 22rpx 30rpx;
			display: flex;
			justify-content: space-between;

			.node_type {
				font-weight: 500;
				font-size: 22rpx;
				color: #FFFFFF;
				width: 112rpx;
				height: 34rpx;
				background: #FF0000;
				border-radius: 8rpx 0rpx 0rpx 8rpx;
				text-align: center;
				line-height: 34rpx;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 16rpx;
			}

			.status {
				font-weight: 500;
				font-size: 18rpx;
				color: #FFFFFF;
				display: flex;
				margin-top: 12rpx;

				.onLine {
					width: 56rpx;
					height: 32rpx;
					border-radius: 4rpx;
					line-height: 32rpx;
					text-align: center;
					margin-right: 4rpx;
					background: #5BBE73;
				}

				.onLine1 {
					background: #426EF6;
				}

				.onLine2 {
					background: #E86E52;
				}

				.btn {
					width: 74rpx;
					height: 32rpx;
					background: #426EF6;
					border-radius: 4rpx;
					line-height: 32rpx;
					text-align: center;
					margin-right: 4rpx;
				}

				.btn1 {
					background: #FF9C6A;
				}

				.btn2 {
					background: #9C42F6;
				}

				.btn3 {
					background: #5BBE73;
				}

				.btn4 {
					background: #42BAF6;
				}

				.btn5 {
					background: #A9A9A9;
				}

				.btns1 {
					font-weight: 500;
					font-size: 18rpx;
					color: #FFFFFF;
					width: 74rpx;
					height: 32rpx;
					background: #5BBE73;
					border-radius: 4rpx;
					line-height: 32rpx;
					text-align: center;
					margin-right: 4rpx;
				}

				.btns2 {
					background: #A9A9A9;
				}
			}

			&_right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				display: flex;

				image {
					width: 64rpx;
					height: 64rpx;
					margin: -27rpx 0 0;
				}
			}
		}

		&_bottom {
			display: flex;
			padding: 20rpx 20rpx;
			justify-content: space-between;

			.box {
				width: 33%;
			}

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			.num {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}

			.right_top {
				display: flex;
				justify-content: space-between;
				margin: 0rpx 0 10rpx;
				font-size: 22rpx;
				font-weight: 500;
			}

			.right_bottom {
				font-size: 22rpx;
				color: #000;
				display: flex;
				justify-content: space-between;
				margin-top: 6rpx;
				font-weight: 500;

				.text {
					color: #5990FF;
				}
			}
		}

		.line {
			width: 710rpx;
			height: 2rpx;
			background: #EAEAEA;
		}

		.adjustment {
			font-weight: 500;
			font-size: 28rpx;
			display: flex;
			justify-content: space-between;
			margin: 20rpx 20rpx 0;

			.btn1 {
				width: 296rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 32rpx;
				border: 2rpx solid #5990FF;
				color: #5990FF;
			}

			.btn2 {
				width: 296rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #5990FF;
				border-radius: 32rpx;
				color: #FFFFFF;
			}

			.btn3 {
				width: 670rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 32rpx;
				border: 2rpx solid #5990FF;
				color: #5990FF;
				line-height: 64rpx;
				text-align: center;
			}
		}
	}

	.addmodel {
		width: 750rpx;
		background: #F5F1EE;
		border-radius: 20rpx 20rpx 0 0;

		.top {
			width: 750rpx;
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 27rpx 37rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #19181A;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0 0;

			image {
				width: 34rpx;
				height: 34rpx;
			}
		}

		.list {
			height: 876rpx;

			.listitem {
				width: 690rpx;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				box-sizing: border-box;
				margin: 30rpx auto 0;
				align-items: center;

				.left {
					display: flex;
				}

				.name {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}

				.text {
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
					margin-top: 12rpx;
				}

				.num {
					font-weight: 500;
					font-size: 28rpx;
					color: #FF3333;
					margin-top: 30rpx;
				}

				image {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
				}

				.btn {
					width: 140rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 32rpx;
					border: 2rpx solid #5990FF;
					font-weight: 500;
					font-size: 24rpx;
					color: #5990FF;
					line-height: 48rpx;
					text-align: center;
				}

			}
		}
	}

	.showpaw {
		width: 500rpx;
		height: 286rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		position: fixed;
		top: 30%;
		left: 18.5%;
		box-sizing: border-box;
		padding: 40rpx 30rpx;

		.text {
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.btn {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;

			&_close {
				width: 186rpx;
				height: 72rpx;
				border-radius: 40rpx;
				border: 2rpx solid #5990FF;
				font-weight: 500;
				font-size: 26rpx;
				color: #5990FF;
				line-height: 72rpx;
				text-align: center;
			}

			&_sure {
				width: 186rpx;
				height: 72rpx;
				background: #5990FF;
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}

		.bot {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			text-align: center;
			margin-top: 40rpx;

			span {
				color: #5990FF;
				margin-left: 20rpx;
			}
		}
	}
</style>